<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;">
				添加評價
			</view>
			<view @click="submit" style="color: #FFF;font-size: 26rpx;font-weight:400;border-radius: 200rpx;background-color: #1AAEC0;padding: 12rpx 28rpx;">
				送出
			</view>
		</view>
		<view style="margin-top: 28rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view style="background-color: #FFF;border-radius: 40rpx;">
				<view style="display:flex; overflow-x: auto; padding: 24rpx;gap: 12rpx; width: 90%; ">
					<view v-for="(item, index) in images" :key="index"  style="width: 180rpx;height: 210rpx;background-color: #F0F0F0;border-radius: 20rpx;flex-shrink: 0;">
						<view style="position: relative;display: inline-block;" @click="showImgFn(index)">
							<u-image
								:src="item.url"
								width="180rpx"
								height="210rpx"
								radius="20rpx"
							></u-image>
						</view>
					</view>
					<view style="width: 180rpx;height: 210rpx;background-color: #F0F0F0;border-radius: 20rpx;flex-shrink: 0;" @click="chooseImg" v-if="images.length < 6">
						<view style="margin: 87rpx 0 0 72rpx;">
							<u-image
								src="/static/images/icon/plus-grey.png"
								width="36rpx"
								height="36rpx"
							></u-image>
						</view>
					</view>
				</view>
				<view style="border-top: 2rpx solid #FAFAFA;padding:18rpx 24rpx;">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view>
							<u-rate :count="count" v-model="value" active-color="#FFA514" inactive-color="#F0F0F0" size="64" ></u-rate>
						</view>
						<view style="font-size: 24rpx;color: #BEC0C5;">為此訂單評分</view>
					</view>
					
				</view>
				<view style="border-top: 2rpx solid #FAFAFA;padding:28rpx 24rpx 0;">
					<u-textarea 
						v-model="form.introduce" 
						placeholder="請給予服務評價" 
						border="none"  
						maxlength="500" 
						height="240" 
						@change="handleTextarea" 
						:confirmType="null" 
						ref="myTextarea"
						></u-textarea>
				</view>
				<view style="border-top: 2rpx solid #FAFAFA;padding:28rpx 24rpx;display: flex;justify-content: space-between;">
					<view style="display: flex;justify-content: flex-start;">

					</view>
					<view style="color:#BEC0C5;font-size: 20rpx;">
						{{textarea_count}} / 500
					</view>
				</view>
			</view>
		</view>
		
		<!--圖片查看開始-->
		<u-overlay :show="showImg" opacity="1" :duration="400">
			<view class="container">
				<view class="imgs">
					<image
						:src="picUrl"
						mode="widthFix"
						style="width: 100%;"
					></image>
				</view>
				<view class="footer">
					<view class="btn" @click="delImg">刪除</view>
					<view class="btn" @click="endShowImg">完成</view>
				</view>
			</view>
		</u-overlay>
		<!--圖片查看結束-->
		
		<custom-toast ref="toast" title="感謝您的評價" image="/static/images/icon/success-circle.png" position="center" />
		
	</view>
</template>

<script>
	import { rateOrder } from '@/config/api.js';
	
	export default {
		data() {
			return {
				id:0,
				form:{
					title:'',
					introduce:'',
					classify:'選擇分類',
					type:0
				},
				images:[],
				textarea_count:0,
				showImg:false,
				picUrl:'',
				current:-1,
				count: 5,
				value: 2,
				aid:0,
				toUserId:0
			}
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			this.aid = option.aid
			this.toUserId = option.touid
		},
		methods: {
			onInput(e) {
				this.form.introduce = e.detail.html
			},
			goBack(){
				uni.navigateBack();
			},
			chooseImg(){
				let that = this;
				let uploadUrl = uni.$u.http.config.baseURL+'/api/home/upload'
				uni.chooseImage({
					count:6,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						for(let i=0;i<tempFilePaths.length;i++){
							uni.uploadFile({
								url: uploadUrl,
								header: {
								    'Authorization': 'Bearer ' + uni.getStorageSync('token')// 从全局获取token
								},
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'type': 'rate',
									'timestamp': Date.now()
								},
								success: (uploadFileRes) => {
									// that.images.push({url:tempFilePaths[i]});
									let res = JSON.parse(uploadFileRes.data)
									that.images.push({url:res.fullurl});
									console.log(that.images)
								}
							});
						}
					},
					fail:(e)=>{
						console.log('error', e)
					},
					complete:(res)=>{
						console.log('complete', res)
					}
				});
			},
			handleInput(){
				this.input_count = this.form.title.replace(/[\s\n]/g, '').length;
			},
			handleTextarea(){
				//統計字數
				this.textarea_count = this.form.introduce.replace(/[\s\n]/g, '').length;
			},
			showImgFn(e){
				this.url = this.images[e].url;
				this.current = e;
				this.showImg = true;
			},
			endShowImg(){
				this.url = '';
				this.current = -1;
				this.showImg = false;
			},
			delImg(){
				this.images.splice(this.current, 1);
				this.endShowImg();
			},
			submit(){
				let img = Object.values(this.images)
					.map(item => item.url)
					.join(',');
				
				let data = {
					id:this.id,
					rate:this.value,
					imgsList:img,
					content:this.form.introduce
				}
				rateOrder(data).then((res) => {
					//success
					console.log( res )
					this.$refs.toast.show();
					setTimeout(function(){
						uni.switchTab({
							url: '/pages/home/index'
						});
					}, 1000)
					
				}).catch(() =>{
					
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		min-height: 100vh;
	}
	.list-item{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 34rpx 24rpx;
		background-color: #FFF;
		margin-top: 2rpx;
		align-items: center;
		
		.list-item-title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			.item-title{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 144rpx;
				font-size: 28rpx;
				
				.title{
					color: #232426;
					font-size: 28rpx;
					font-weight: 500;
				}
				.warning-bag{
					color: #FF3D43;
					margin-left: 10rpx;
				}
			}
			.item-subtitle{
				color: #BEC0C5;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 24rpx;
			}
			.item-subtitle-active{
				color: #232426;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 24rpx;
			}
		}
		
	}
	
	.list-item:first-of-type{
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}
	.list-item:last-of-type{
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
	}
	.container{
		position: relative;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		
		.imgs{
			position: absolute;
			top: 50%;           /* 顶部定位到父容器 50% 位置 */
			left: 50%;          /* 左侧定位到父容器 50% 位置 */
			transform: translate(-50%, -50%); /* 自身宽高的 -50% 偏移 */
			width: 100%;
			text-align: center;
		}
		
		.footer{
			width: 100%;
			position: absolute;
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
			box-sizing: border-box;
			bottom: 50rpx;
			
			.btn{
				color: #FFF;
			}
		}
	}
	.user-search-popup{
		width: 100%;
		background-color: #FAFAFA;
		padding: 24rpx 48rpx;
		box-sizing: border-box;
		
		.search-popup-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			
			.title{
				margin-left: 20rpx;
				font-size: 24rpx;
				color:#232426;
			}
			.highlight {
			  color: #27C5D6; /* 红色高亮 */
			  font-weight: bold; /* 可选：加粗强调 */
			}
		}
	}
	.popup-push-type{
		padding: 58rpx 40rpx 28rpx;
		
		.popup-push-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.site{
				color: #808690;
				font-size: 32rpx;
			}
			.title{
				color: #232426;
				font-size: 30rpx;
				font-weight: 600;
			}
			.btn{
				color: #27C5D6;
				font-size: 32rpx;
			}
		}
		.popup-push-body{
			margin-top: 24rpx;
			
			.popup-push-list{
				
				box-sizing: border-box;
				
				.popup-push-item{
					margin-top: 32rpx;
					padding: 20rpx 48rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background: #F6F8FA;
					border-radius: 120rpx;
					
					.popup-push-icon{
						
					}
					.popup-push-radio{
						border-radius: 50%;
						width: 48rpx;
						height: 48rpx;
						background-color: #E5E6E8;
					}
					
					.popup-push-text{
						margin-left: 32rpx;
						width: 400rpx;
						
						.title{
							font-size:28rpx;
							font-weight: 600;
						}
						.describe{
							color:#6A707C;
							font-size:24rpx;
						}
					}
					
					.popup-push-arrow{
						margin-left: 32rpx;
					}
					
				}
			}
		}
	}
</style>
